<style lang="scss">
.my {
	padding: 10rpx 30rpx;
	// 头像
	.user-img {
		width: 200rpx;
		height: 200rpx;
		// line-height: 200rpx;
		text-align: center;
		border-radius: 50%;
		// 溢出部分隐藏
		overflow: hidden;
		// 上下20rpx边距  左右居中显示
		margin: 20rpx auto;
		.img {
			width: 100%;
			vertical-align: middle;
		}
	}
	// 昵称
	.user-name {
		// 文本水平居中
		text-align: center;
		padding: 20rpx 0;
	}
	// 时间
	.user-time {
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
		color: #ccc;
		.txt {
			color: #666;
		}
	}
	// 列表
	.user-list {
		margin-top: 100rpx;
		.list-item {
			.link {
				// 把链接组件转容器组件
				display: block;
				width: 100%;
				// 设置高度
				height: 100rpx;
				// 设置行高
				line-height: 100rpx;
				// 设置下边框线
				border-bottom: 1px solid #ccc;
				background-color: #f0f0f0;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}
	}
}



.index-link {
	margin: 80rpx 0;
	text-align: center;
	.img {
		width: 80rpx;
	}
}
</style>


<template>
	<view class="my">
		  <!-- 1.0 用户头像 -->
		  <view class="user-img">
			   <image 
					class="img"
					src="../../static/img/user.jpg" 
					mode="widthFix">
				</image>
		  </view>
		  <!-- 2.0用户昵称 -->
		  <view class="user-name">
			  <text>昵称: {{info.nickname}}</text>
		  </view>
		  <!-- 3.0 创建时间 -->
		  <view class="user-time">
			  创建时间:<text class="txt">{{info.register_date}}</text>
		  </view>
		  
		  <!--4.0 列表 -->
		  <view class="user-list">
			  <view class="list-item">
				  <navigator url="/pages/user_info/user_info" class="link">
					  我的账号
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/collect/collect" class="link">
					  我的收藏
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/about/about" class="link">
					  关于我们
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/agreement/agreement" class="link">
					  平台协议
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/manage/manage" class="link">
					  登录管理
				  </navigator>
			  </view>
			  
		  </view>
	
		  <!-- 5.0 跳转首页链接 -->
		  <view class="index-link">
			  <navigator url="/pages/index/index">
				  <image 
				  class="img"
				  src="../../static/i_home.png" 
				  mode="widthFix"></image>
			  </navigator>
		  </view>
	
	</view>
	
</template>

<script setup>
	
	// 导入vue相关的函数
	import {
		reactive,
		ref
	} from 'vue';
	
	// 导入用户集合的引用
	import { usersCollection } from '../../common/db/index.js'
	
	// 定义变量 记录用户的信息
	let info = reactive({})
	
	// 编写一个获取用户信息的方法
	const getUserInfo = async (userid)=> {
		uni.showLoading({
			title:"加载...."
		})
		await usersCollection.where({_id: userid}).get()
		.then(
			res=> {
				console.log("查询结果:",res);
				let result = res.result;
				if(result.data.length == 1) {
					let  {email , register_date, nickname} = result.data[0];
					info.email = email;
					info.nickname = nickname;
					let date = new Date()
					date.setTime(register_date)
					let YY = date.getFullYear();
					let MM = date.getMonth() + 1;
					let DD = date.getDate();
					info.register_date = `${YY}-${MM}-${DD}`;
					
				}
			}
		)
		
		// 隐藏加载
		uni.hideLoading();
	}
	
	// 获取本地存储的用户身份
	// ZSSTB_ID
	let userid = uni.getStorageSync("ZSSTB_ID");
	
	// 判断userid是否为 null
	console.log("id:",userid);
	
	if(userid) {
		// 获取用户信息
		getUserInfo(userid);
	}
	
</script>


